<script setup lang="ts">
import { getDnsAuthorityGtmAddressPoolsApi } from '@/apis/modules/dns'
import { commonTableProps } from '@/utils/table'
import EditDrawer from './components/EditDrawer.vue'
import useConfig from './useConfig'

const { tableColumns } = useConfig()

const queryParams = ref({ name_keyword: '', type: 2 })

const { loading, pagination, data, run } = useListRequest(
  getDnsAuthorityGtmAddressPoolsApi,
  {
    params: queryParams,
    immediate: true,
  },
)
const {
  visible: editDialogVisible,
  open: openEditDialog,
  data: editDialogData,
} = usePopup()

const { createSortChange } = useTable(run, data)
const onSorterChange = createSortChange(queryParams)
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <section class="mb-4 flex items-center">
      <a-input-search
        v-model="queryParams.name_keyword"
        placeholder="请输入地址池名称搜索"
        class="!w-58"
        allow-clear
        @clear="run()"
        @search="run()"
        @keydown.enter="run()"
      />
      <a-button
        class="ml-auto shrink-0 text-color-1"
        type="outline"
        :disabled="loading"
        @click="run"
      >
        <template #icon>
          <i-icons-refresh :class="{ 'animate-spin': loading }" />
        </template>
      </a-button>
    </section>
    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="data"
      @sorter-change="onSorterChange"
    >
      <template #actions="{ record }">
        <a-link
          :hoverable="false"
          @click="openEditDialog(record)"
        >
          <i-icons-show size="16px" />
        </a-link>
      </template>
    </a-table>
  </main-container>
  <edit-drawer
    v-model:visible="editDialogVisible"
    :record="editDialogData"
    @reload="run"
  />
</template>

<style scoped>
:deep(.arco-table-tr) {
  .table-icon {
    opacity: 0;
    color: var(--color-text-7);
    cursor: pointer;
  }

  &:hover {
    .table-copy-text {
      @apply text-primary;
    }

    .table-icon {
      opacity: 1;
      color: #00a65b;
    }
  }
}
</style>
